<script setup>
import imgStatusWorking from '@/assets/image/staff/status-working.png'
import imgStatusFree from '@/assets/image/staff/status-free.png'
import imgStatusError from '@/assets/image/staff/status-error.png'

defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<template>
  <section class="robot-watch">
    <div class="robot-watch__item">
      <n-image
        class="robot-watch__img"
        width="100%"
        :src="imgStatusWorking"
        preview-disabled
      />
      <div class="robot-watch__text">
        工作 <span>{{ data.workingNum || 0 }}</span>
      </div>
    </div>
    <div class="robot-watch__item">
      <n-image
        class="robot-watch__img"
        width="100%"
        :src="imgStatusFree"
        preview-disabled
      />
      <div class="robot-watch__text">
        空闲 <span>{{ data.idleNum || 0 }}</span>
      </div>
    </div>
    <div class="robot-watch__item">
      <n-image
        class="robot-watch__img"
        width="100%"
        :src="imgStatusError"
        preview-disabled
      />
      <div class="robot-watch__text">
        异常 <span>{{ data.abnormalNum || 0 }}</span>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.robot-watch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 36px;

  &__item {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__text{
    margin-top: 3px;
  }
}
</style>
